<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格生成.html</title>
    <script src="js/jquery-3.6.3.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            text-decoration: none;
        }

        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        table {
            border-collapse: collapse;
        }

        th {
            background-color: aquamarine;
            border: 1px solid darkgray;
        }

        th, tr {
            text-align: center;
            width: 300px;
            height: 40px;
        }

        .container {
            width: 400px;
            margin: 0 auto;

        }
        .delete{
            width: 150px;
        }

        .box {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
        }

        .form {
            width: 500px;
            height: 300px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 5px;
            color: #000000;
            padding: 10px;
            opacity: 1;
            cursor: pointer;
        }
        .form_header{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid darkgrey;
            font-size: 25px;
        }
        .from_content{
            margin-top: 20px;
            font-size: 20px;
        }
        .form_item{
            margin: 15px 0;
            border: 1px solid dimgrey;
            padding: 5px;
        }
        #username, #age{
            height: 25px;
            width: 410px;
            border: none;
            outline: none;

        }
        #username:focus, #age:focus{
            border: none;
        }
        .form_label{
            border-right: 1px solid dimgrey;
            padding: 5px;
        }
        .form_footer{
            width: 400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .container button{
            width: 100px;
            height: 30px;
            margin: 5px;
            border: none;
            background-color: khaki;
            border-radius: 3px;
        }
        .form_footer button{
            border-radius: 3px;
            width: 100px;
            height: 40px;
            border: none;
            opacity: 1;
        }
        .form_footer button:nth-of-type(1)   {
            background-color: greenyellow;
        }
        .box, .add_div{
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <button id="getDate">获取数据</button>
    <button id="add">添加数据</button>
    <table>
        <thead>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</div>
</body>
<div class="box"></div>
<div class="add_div">
    <form class="form">
        <div class="form_header">
            <span>添加数据</span>
            <span id="close">X</span>
        </div>
        <div class="from_content">
            <div class="form_item">
                <label for="username" class="form_label">姓名</label>
                <input type="text" placeholder="请输入姓名：" id="username">
            </div>
            <div class="form_item">
                <label class="form_label">性别</label>
                <input type="radio" value="男" name="sex" checked="true">男
                <input type="radio" value="女" name="sex" style="margin-left: 30px">女
            </div>
            <div class="form_item">
                <label for="age" class="form_label">年龄</label>
                <input type="text" placeholder="请输入年龄：" id="age">
            </div>
        </div>
        <div class="form_footer">
            <button type="button" id="subbtn">添加</button>
            <button type="reset">重置</button>
        </div>
    </form>
</div>

<script>
    $(function () {
        let data = [{
            name: '张三',
            sex: '男',
            age: '25'
        }, {
            name: '李四',
            sex: '女',
            age: '36'
        }, {
            name: '王五',
            sex: '女',
            age: '15'
        }, {
            name: '赵六',
            sex: '男',
            age: '24'
        },]

        let list = []
        $('#getDate').click(function () {
            for (let i = 0; i < data.length; i++) {
                let $str = $('<tr><td>' + data[i]['name'] + '</td>>' +
                    '<td>' + data[i]['sex'] + '</td>' +
                    '<td>' + data[i]['age'] + '</td>' +
                    '<td style="width: 200px"><button class="delete">删 除</button></td>' +
                    '</tr>')
                $str.find('.delete').click(function () {
                    $(this).parent().parent().remove()
                })
                $('#tbody').append($str)
            }
        })

        $('#add').click(function (){
            $('.box').show()
            $('.add_div').show()
            $('#username').val("")
            $('#age').val("")
        })

        $('#close').click(function (){
            $('.box').hide()
            $('.add_div').hide()
        })

        $('#subbtn').click(function (){
            let username = $('#username').val()
            let age = $('#age').val()
            let sex = $('input:radio:checked').val();
            let $newstr = $('<tr><td>' + username + '</td>>' +
                '<td>' + sex + '</td>' +
                '<td>' + age + '</td>' +
                '<td style="width: 200px"><button class="delete">删 除</button></td>' +
                '</tr>')

            $newstr.find('.delete').click(function () {
                $(this).parent().parent().remove()
            })
            $('#tbody').append($newstr)
            $('#close').click()
        })
    })


</script>
</html>